<template>
    <div class="orders">
       <div class="search">
          <div>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入品牌名称"  v-model="goodsName"></el-input>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入香型" v-model="lowPrice"></el-input>
            <el-input style="width: 200px; margin-right: 20px;"  placeholder="请输入酒精度" v-model="highPrice"></el-input>
            <el-button type="primary">搜索</el-button>
          </div>
       </div>
       <div class="main">
        <div class="brand">
          <div>
            <span style="font-weight: 500; font-size: 18px;margin: 15px 30px 0 0;" >品牌:</span>
            <div v-for="(item) in list.brandList" :key="item.id" style="margin: 15px 40px 0 0 ;" :class="bisEdit ? 'edit' : ''">
              <span>{{ item.descp }}</span>
              <img  v-if="bisEdit" src="../../assets/取消,关闭_jurassic.svg" alt="" class="icon" @click="del(item)">
            </div>
          </div>
          <div>
            <el-button @click="showDialog('品牌',1)">添加</el-button>
            <el-button @click="bisEdit=!bisEdit">删除</el-button> 
          </div>
       </div>
        <div class="brand">
          <div>
            <span style="font-weight: 500; font-size: 18px;margin: 15px 30px 0 0;" >香型:</span>
            <div v-for="(item) in list.flavorList" :key="item.id" style="margin: 15px 40px 0 0 ;"  :class="fisEdit ? 'edit' : ''">
              <span>{{ item.descp }}</span>
              <img  v-if="fisEdit" src="../../assets/取消,关闭_jurassic.svg" alt="" class="icon" @click="del(item)">
            </div>
          </div>
          <div>
            <el-button @click="showDialog('香型',2)">添加</el-button>
            <el-button @click="fisEdit=!fisEdit">删除</el-button> 
          </div>
       </div>
        <div class="brand">
          <div>
            <span style="font-weight: 500; font-size: 18px;margin: 15px 30px 0 0;" >酒精度:</span>
            <div v-for="(item) in list.degreeList" :key="item.id" style="margin: 15px 40px 0 0 ;" :class="disEdit ? 'edit' : ''">
              <span>{{ item.descp }}</span>
              <img  v-if="disEdit" src="../../assets/取消,关闭_jurassic.svg" alt="" class="icon" @click="del(item)">
            </div>
          </div>
          <div>
            <el-button @click="showDialog('酒精度',3)">添加</el-button>
            <el-button @click="disEdit=!disEdit">删除</el-button> 
          </div>
       </div>
       </div>
       <div class="dialog">
         <el-dialog
          :title="this.type"
          :visible.sync="dialog"
          width="30%"
          center>
          <el-input placeholder="请输入内容" v-model="brandValue"/>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
          </span>
        </el-dialog>
       </div>
    </div>
</template>
<script>
import {getData,addBrand} from "@/api/classIfy"
export default {
  created(){
   this.getData()
  },
  data() {
    return {
      goodsName: "",
      lowPrice: "",
      highPrice: "",
      list: {},
      bisEdit:false,
      disEdit:false,
      fisEdit:false,
      dialog: false,
      brandValue: "",
      type:"",
      pid:0
    }
  },
  methods: {
    showDialog(type,pid){
      this.type="添加"+type
      this.pid=pid
      this.dialog=true
    },
   async del(item) {
      this.brandValue=item.descp
      await addBrand("/shopping/deleteSort",{descp:this.brandValue})
      this.getData()
      this.brandValue=""
      this.$message.success("删除成功")
      switch (item.parentId) {
        case 1:
          this.bisEdit=false
          return
          case 2:
          this.fisEdit=false
          return
          case 3:
          this.disEdit=false
          return
      }
      
    },
   async add() {
      if (this.brandValue != "") {
        await addBrand("/shopping/addSort/"+this.pid,{descp:this.brandValue})
        this.getData()
        this.brandValue = ""
        this.dialog = false
        this.$message.success("添加成功")
      } else {
        this.$message.warning("请输入品牌方名称")
      }
    },
   async getData(){
       const data= await getData("/shopping/sortList")
       this.list= data.data.list
       console.log(this.list);
    }
  }
}
</script>
<style scoped>
.search {
  display: flex;
  padding-left: 30px;
  justify-content: space-between;
}

.orders {
  width: 100%;
  height: 91vh;
  padding: 50px 50px 0 50px;
}

.brand {
  width: 100%;
  /* background-color: pink; */
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.brand>div:first-of-type {
  width: 90%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.brand>div:last-of-type {
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 15px;
  height: 15px;
  margin-left: 10px;
}

.edit {
  padding: 8px 10px 8px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  /* margin-top: 10px; */
}

.main {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.dialog-footer {
  margin-top: 100px;
}
</style>